<template>
  <div class="box">
    <header>
       <Search />
    </header>
    <!-- 分类搜索框 -->
    <div class="content" id="content">
      <div class="kind">
        <!-- 分类的导航条 -->
        <div class="kind-nav">
          <ul>
            <li :class="kindindex === index ? 'active' : ''" v-for="(item, index) of kindList" :key="index" @click="getlist(item, index)">{{ item.classifyName }}</li>
          </ul>
        </div>
         <div>
        <!-- 分类的主要内容 -->
        <vant-list
          v-model='loading'
          :finished = "finished"
          finished-text="没有更多了"
          @load = 'onLoad'
        >
        <Prolist :prolist = "prolist"/>
        </div>
        <!-- 返回顶部和直通购物车 -->
        <BackTop />
        </vant-list>
      </div>
    </div>
  </div>
</template>
<<<<<<< HEAD
<script>
import Vue from 'vue'
import { List } from 'vant'
import { kindAll } from '@/utils/api'
// import BScroll from 'better-scroll'
import Prolist from '@/components/Prolist'
// import Back from '@/components/Back'
import BackTop from '@/components/BackTop'
import Search from '@/components/Search2'
Vue.use(List)
export default {
  components: {
    BackTop,
    Search,
    Prolist
  },
  data () {
    return {
      kindList: [],
      prolist: [],
      loading: false,
      finished: false,
      kindindex: 0,
      index: 0
    }
  },
  created () {
    kindAll().then(data => {
      console.log(data.data)
      this.kindList = data.data
      // console.log(this.kindList[0].classifyCode)
      console.log(this.kindList[0].data)
      this.getlist(this.kindList[0], 0)
    })
  },
  methods: {
    onLoad () {
      console.log('上拉加载开始')
      this.loading = true
      kindAll( {
        params: {
          pageCode: this.pageCode,
          limitNum: 10
        }
      } ).then(res => {
        this.then(res =>{
          this.loading=
        })
      })
    }
    getlist (item, index) {
      this.kindindex = index
      kindAll().then(data => {
        this.prolist = data.data[index].data
        console.log(this.prolist)
      })
    }
  }
}
</script>
=======
>>>>>>> edbed9d81920db20dee69b78bc388b580524c85e
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  width: 100%;
  @include background-color(#36bc7c);
  height:.54rem;
  @include flexbox();
  @include flex-direction();
  @include justify-content(space-between);
  position: absolute;
  line-height: .54rem;
  left: 0;
  top: 0;
}
.content {
  margin-top: 10px;
  .kind {
    @include flexbox();
    @include flex-direction();
    .kind-nav {
      @include rect(.9rem, auto);
      ul {
        @include background-color(#fff);
        @include rect(.8rem, 4.02rem);
        @include flexbox();
        @include flex-direction(column);
        @include border(0 1px 0 0, #efefef, solid);
        li {
          @include flexbox();
          @include flex-direction();
          @include line-height(.5rem);
          @include text-align(center);
          @include font-size(0.17rem);
          @include color(#656565);
          &.active {
            border-bottom: 2px solid rgb(71, 153, 230);
            @include background-color(#36bc7c);
            @include color(#fff);
            border-radius: 0 2.5rem 2.5rem 0;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
